<template>
	<view class="paper__container__item u-f-ac animate__animated animate__fadeInLeftBig" @tap="sendUserChat">
		<image :src="item.userpic" mode="widthFix"/>
		<view class="paper__container__item__content u-f">
			<view class="paper__container__item__content__header u-f-ac">
				<text class="paper__container__item__content__header--title">{{item.username}}</text>
				<text class="paper__container__item__content__header--date">{{item.time}}</text>
			</view>
			<view class="paper__container__item__content__footer u-f-ac">
				<text class="paper__container__item__content__footer--desc">{{item.data}}</text>
				<!-- <text class="paper__container__item__content__footer--info">1</text> -->
				<uniBadge type="warning" :text="item.noreadnum" size="normal"/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import uniBadge from '../uni-badge/uni-badge.vue';
	import user from '../../common/user.js'
	
	const props = defineProps({
		item:{
			type:Object,
			required:true,
		}
	})
	
	function sendUserChat(){
		user.navigate({
			url:"/pages/user-chat/user-chat"
		})
	}
	
</script>

<style scoped lang="scss">
.paper__container__item{
		padding: 20upx 0;
		border-bottom: 1upx solid #eaeaea;
		>image {
			width: 100upx;
			height: 100upx;
			border-radius: 10upx;
			margin-right:36upx;
		}
		&__content{
			flex: 1;
			flex-direction: column;
			&__header{
				justify-content: space-between;
				&--title{
					font-size: 40upx;
					font-family: "宋体";
				}
				&--date{
					font-size: 24upx;
					color:#bababa;
				}
			}
			&__footer{
				justify-content: space-between;
				
				&--desc{
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					flex:1;
					margin-right:39upx;
					color: #aaa;
				}
				&--info{
					border-radius: 50%;
					padding: 10upx 16upx;
					background-color: #ff5c64;
					color: white;
				}
			}
		}
		
	}

</style>
